import AModal from '@/components/AModal';
import { create, details, updateInfo } from '@/services/sales/integralGoods';
import { ProCard } from '@ant-design/pro-components';
import { useDispatch, useSelector } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Button } from 'antd';
import FormRender, { useForm } from 'form-render';
import { useEffect } from 'react';
import SetGoods from '../component/SetGoods';

export default () => {
  const {
    integralGoods: { editVisible, editData, type },
  } = useSelector((state) => state);
  const dispatch = useDispatch();
  const form = useForm();
  const update = (data) => {
    dispatch({
      type: 'integralGoods/update',
      payload: data,
    });
  };

  const { run, loading } = useRequest(type === 'add' ? create : updateInfo, {
    manual: true,
    onSuccess: ({ code }) => {
      if (code && code === 200) {
        update({ editVisible: false, type: '', editData: {}, reload: true });
      }
    },
  });

  const { run: runSku, loading: skuLoading } = useRequest(details, {
    manual: true,
    // eslint-disable-next-line no-unused-vars
    onSuccess: async ({ code, data }) => {
      if (code === 200) {
        const datas = (data || []).map((item) => {
          return {
            skuName: item.skuName,
            itemId: item.itemId,
            itemSkuId: item.itemSkuId,
            skuStock: item.skuStock,
            price: item.price,
            // pointsItemPrice: item.pointsItemPrice || item.price || 0,
            pointsItemPrice: item.pointsItemPrice || 0,
            pointsItemScore: item.pointsItemScore || 0,
            pointsStock: item.pointsStock || 0,
          };
        });
        form.setValues({
          pointsItemSkuVoList: datas || [],
        });
      }
    },
  });

  useEffect(() => {
    if (editVisible) {
      runSku({
        itemId: editData.itemId,
      });
      form.setValues({
        itemName: editData.itemName,
        buyNum: editData.buyNum,
      });
    }
  }, [editData.itemId]);

  const onFinish = (values) => {
    const paramsAdd = {
      pointsItemList: [
        {
          id: editData.id,
          itemId: editData.itemId,
          price: editData.price,
          buyNum: values.buyNum,
          pointsItemSkuVoList: values?.pointsItemSkuVoList?.map((item) => ({
            itemId: item.itemId,
            itemSkuId: item.itemSkuId,
            price: item.price,
            pointsItemPrice: item.pointsItemPrice,
            pointsItemScore: item.pointsItemScore,
            pointsStock: item.pointsStock,
          })),
        },
      ],
    };
    const params = {
      id: editData.id,
      itemId: editData.itemId,
      price: editData.price,
      buyNum: values.buyNum,
      pointsItemSkuVoList: values?.pointsItemSkuVoList?.map((item) => ({
        itemId: item.itemId,
        itemSkuId: item.itemSkuId,
        price: item.price,
        pointsItemPrice: item.pointsItemPrice,
        pointsItemScore: item.pointsItemScore,
        pointsStock: item.pointsStock,
      })),
    };
    run(type === 'add' ? paramsAdd : params);
  };

  const close = () => {
    update({ editVisible: false, editData: {}, type: '' });
  };

  return (
    <AModal
      open={editVisible}
      width={1000}
      onCancel={close}
      footer={
        <div style={{ paddingBottom: 24, paddingRight: 24 }}>
          <Button key="save" type="primary" loading={loading} onClick={form.submit}>
            保存
          </Button>
          <Button key="cancel" onClick={close}>
            取消
          </Button>
        </div>
      }
    >
      <ProCard title="设置积分配比" headerBordered bodyStyle={{ paddingBottom: 0 }}>
        <FormRender
          widgets={{ setGoods: SetGoods }}
          form={form}
          labelWidth={120}
          maxWidth={250}
          schema={{
            type: 'object',
            displayType: 'row',
            properties: {
              // 经销等级
              itemName: {
                span: 24,
                type: 'string',
                title: '商品名称',
                widget: 'html',
              },
              buyNum: {
                span: 24,
                type: 'number',
                title: '每人限购',
                widget: 'select',
                props: {
                  options: [
                    { label: '1', value: 1 },
                    { label: '2', value: 2 },
                    { label: '3', value: 3 },
                    { label: '4', value: 4 },
                    { label: '5', value: 5 },
                  ],
                },
                required: true,
              },
              pointsItemSkuVoList: {
                span: 24,
                type: 'array',
                widget: 'setGoods',
                props: {
                  loading: skuLoading,
                },
              },
            },
          }}
          onFinish={onFinish}
        />
      </ProCard>
    </AModal>
  );
};
